

	<h2 style="margin: 20px 0;">进度条颜色</h2>
	<p style="margin: 10px 0;">调用方法： class="easyui-progressbar progressbar-red"</p>
    <p>.progressbar-red</p>
    <div class="easyui-progressbar progressbar-red" data-options="value:80" style="width:50%;"></div>
    <p>.progressbar-warning</p>
    <div class="easyui-progressbar progressbar-warning" data-options="value:80" style="width:50%;"></div>
    <p>.progressbar-yellow</p>
    <div class="easyui-progressbar progressbar-yellow" data-options="value:80" style="width:50%;"></div>
    <p>.progressbar-olive</p>
    <div class="easyui-progressbar progressbar-olive" data-options="value:80" style="width:50%;"></div>
    <p>.progressbar-green</p>
    <div class="easyui-progressbar progressbar-green" data-options="value:80" style="width:50%;"></div>
    <p>.progressbar-teal</p>
    <div class="easyui-progressbar progressbar-teal" data-options="value:80" style="width:50%;"></div>
    <p>.progressbar-blue</p>
    <div class="easyui-progressbar progressbar-blue" data-options="value:80" style="width:50%;"></div>
    <p>.progressbar-darkblue</p>
    <div class="easyui-progressbar progressbar-darkblue" data-options="value:80" style="width:50%;"></div>
    <p>.progressbar-violet</p>
    <div class="easyui-progressbar progressbar-violet" data-options="value:80" style="width:50%;"></div>
    <p>.progressbar-purple</p>
    <div class="easyui-progressbar progressbar-purple" data-options="value:80" style="width:50%;"></div>
    <p>.progressbar-pink</p>
    <div class="easyui-progressbar progressbar-pink" data-options="value:80" style="width:50%;"></div>
    <p>.progressbar-brown</p>
    <div class="easyui-progressbar progressbar-brown" data-options="value:80" style="width:50%;"></div>
    <p>.progressbar-grey</p>
    <div class="easyui-progressbar progressbar-grey" data-options="value:80" style="width:50%;"></div>
    <p>.progressbar-black</p>
    <div class="easyui-progressbar progressbar-black" data-options="value:80" style="width:50%;"></div>

    <h5 style="margin: 20px 0;">进度条动画颜色</h5>
    <p style="margin: 10px 0;">调用方法： class="easyui-progressbar progressbar-red progressbar-animation"</p>
    <p>.progressbar-red</p>
    <div class="easyui-progressbar progressbar-red progressbar-animation" data-options="value:80" style="width:50%;"></div>
    <p>.progressbar-warning</p>
    <div class="easyui-progressbar progressbar-warning progressbar-animation" data-options="value:80" style="width:50%;"></div>
    <p>.progressbar-yellow</p>
    <div class="easyui-progressbar progressbar-yellow progressbar-animation" data-options="value:80" style="width:50%;"></div>
    <p>.progressbar-olive</p>
    <div class="easyui-progressbar progressbar-olive progressbar-animation" data-options="value:80" style="width:50%;"></div>
    <p>.progressbar-green</p>
    <div class="easyui-progressbar progressbar-green progressbar-animation" data-options="value:80" style="width:50%;"></div>
    <p>.progressbar-teal</p>
    <div class="easyui-progressbar progressbar-teal progressbar-animation" data-options="value:80" style="width:50%;"></div>
    <p>.progressbar-blue</p>
    <div class="easyui-progressbar progressbar-blue progressbar-animation" data-options="value:80" style="width:50%;"></div>
    <p>.progressbar-darkblue</p>
    <div class="easyui-progressbar progressbar-darkblue progressbar-animation" data-options="value:80" style="width:50%;"></div>
    <p>.progressbar-violet</p>
    <div class="easyui-progressbar progressbar-violet progressbar-animation" data-options="value:80" style="width:50%;"></div>
    <p>.progressbar-purple</p>
    <div class="easyui-progressbar progressbar-purple progressbar-animation" data-options="value:80" style="width:50%;"></div>
    <p>.progressbar-pink</p>
    <div class="easyui-progressbar progressbar-pink progressbar-animation" data-options="value:80" style="width:50%;"></div>
    <p>.progressbar-brown</p>
    <div class="easyui-progressbar progressbar-brown progressbar-animation" data-options="value:80" style="width:50%;"></div>
    <p>.progressbar-grey</p>
    <div class="easyui-progressbar progressbar-grey progressbar-animation" data-options="value:80" style="width:50%;"></div>
    <p>.progressbar-black</p>
    <div class="easyui-progressbar progressbar-black progressbar-animation" data-options="value:80" style="width:50%;"></div>

    

    <h5 style="margin: 20px 0;">进度条动画及自动颜色</h5>
    <p style="margin: 10px 0;">调用方法： class="easyui-progressbar progressbar-animation  progressbar-auto-color"</p>
    <div class="easyui-progressbar progressbar-animation  progressbar-auto-color" data-options="value:16" data-percent="16"  style="width:50%;"></div><br/>
    <div class="easyui-progressbar progressbar-animation  progressbar-auto-color" data-options="value:31" data-percent="31" style="width:50%;"></div><br/>
    <div class="easyui-progressbar progressbar-animation  progressbar-auto-color" data-options="value:55" data-percent="55" style="width:50%;"></div><br/>
    <div class="easyui-progressbar progressbar-animation  progressbar-auto-color" data-options="value:78" data-percent="78" style="width:50%;"></div><br/>
    <div class="easyui-progressbar progressbar-animation  progressbar-auto-color" data-options="value:98" data-percent="98" style="width:50%;"></div><br/>
	<h2>按钮颜色</h2>
	<div style="margin:20px 0">
		<a href="#" class="easyui-linkbutton button-default">.button-default</a>
		<a href="#" class="easyui-linkbutton button-primary">.button-primary</a>
		<a href="#" class="easyui-linkbutton button-success">.button-success</a>
		<a href="#" class="easyui-linkbutton button-info">.button-info</a>
		<a href="#" class="easyui-linkbutton button-warning">.button-warning</a>
		<a href="#" class="easyui-linkbutton button-danger">.button-danger</a>
		<a href="#" class="easyui-linkbutton button-inverse">.button-inverse</a>
	</div>
	<p style="margin: 10px 0;">调用方法： class="easyui-linkbutton button-warning"</p>
	<div style="margin:20px 0">
		<a href="#" class="easyui-linkbutton button-red">.button-red</a>
		<a href="#" class="easyui-linkbutton button-orange">.button-orange</a>
		<a href="#" class="easyui-linkbutton button-yellow">.button-yellow</a>
		<a href="#" class="easyui-linkbutton button-olive">.button-olive</a>
		<a href="#" class="easyui-linkbutton button-green">.button-green</a>
		<a href="#" class="easyui-linkbutton button-teal">.button-teal</a>
		<a href="#" class="easyui-linkbutton button-blue">.button-blue</a>
		<a href="#" class="easyui-linkbutton button-darkblue">.button-darkblue</a>
		<a href="#" class="easyui-linkbutton button-violet">.button-violet</a>
		<a href="#" class="easyui-linkbutton button-purple">.button-purple</a>
		<a href="#" class="easyui-linkbutton button-pink">.button-pink</a>
		<a href="#" class="easyui-linkbutton button-brown">.button-brown</a>
		<a href="#" class="easyui-linkbutton button-grey">.button-grey</a>
		<a href="#" class="easyui-linkbutton button-black">.button-black</a>
	</div>
	<p style="margin: 10px 0;">调用方法： class="easyui-linkbutton button-warning"</p>

	<div style="margin:20px 0">
		<a href="#" class="easyui-linkbutton button-line-red">.button-line-red</a>
		<a href="#" class="easyui-linkbutton button-line-orange">.button-line-orange</a>
		<a href="#" class="easyui-linkbutton button-line-yellow">.button-line-yellow</a>
		<a href="#" class="easyui-linkbutton button-line-olive">.button-line-olive</a>
		<a href="#" class="easyui-linkbutton button-line-green">.button-line-green</a>
		<a href="#" class="easyui-linkbutton button-line-teal">.button-line-teal</a>
		<a href="#" class="easyui-linkbutton button-line-blue">.button-line-blue</a>
		<a href="#" class="easyui-linkbutton button-line-violet">.button-line-violet</a>
		<a href="#" class="easyui-linkbutton button-line-purple">.button-line-purple</a>
		<a href="#" class="easyui-linkbutton button-line-pink">.button-line-pink</a>
		<a href="#" class="easyui-linkbutton button-line-brown">.button-line-brown</a>
	</div>
    <p style="margin: 10px 0;">调用方法： class="easyui-linkbutton button-line-red"</p>
	<div style="margin:20px 0">
		<a href="#" class="easyui-linkbutton button-red button-loading">loading</a>
		<a href="#" class="easyui-linkbutton button-orange button-loading">loading</a>
		<a href="#" class="easyui-linkbutton button-yellow button-loading">loading</a>
		<a href="#" class="easyui-linkbutton button-olive button-loading">loading</a>
		<a href="#" class="easyui-linkbutton button-green button-loading">loading</a>
		<a href="#" class="easyui-linkbutton button-teal button-loading">loading</a>
		<a href="#" class="easyui-linkbutton button-blue button-loading">loading</a>
		<a href="#" class="easyui-linkbutton button-darkblue button-loading">loading</a>
		<a href="#" class="easyui-linkbutton button-violet button-loading">loading</a>
		<a href="#" class="easyui-linkbutton button-purple button-loading">loading</a>
		<a href="#" class="easyui-linkbutton button-pink button-loading">loading</a>
		<a href="#" class="easyui-linkbutton button-brown button-loading">loading</a>
		<a href="#" class="easyui-linkbutton button-grey button-loading">loading</a>
		<a href="#" class="easyui-linkbutton button-black button-loading">loading</a>
	</div>
	<p style="margin: 10px 0;">调用方法： class="easyui-linkbutton button-red button-loading"</p>
	<h2 style="margin: 20px 0;">字体颜色</h2>
	<p>
		<a href="#" class="font-red">.font-red</a>&nbsp;
		<a href="#" class="font-orange">.font-orange</a>&nbsp;
		<a href="#" class="font-yellow">.font-yellow</a>&nbsp;
		<a href="#" class="font-olive">.font-olive</a>&nbsp;
		<a href="#" class="font-green">.font-green</a>&nbsp;
		<a href="#" class="font-teal">.font-teal</a>&nbsp;
		<a href="#" class="font-blue">.font-blue</a>&nbsp;
		<a href="#" class="font-darkblue">.font-darkblue</a>&nbsp;
		<a href="#" class="font-violet">.font-violet</a>&nbsp;
		<a href="#" class="font-purple">.font-purple</a>&nbsp;
		<a href="#" class="font-pink">.font-pink</a>&nbsp;
		<a href="#" class="font-brown">.font-brown</a>&nbsp;
		<a href="#" class="font-grey">.font-grey</a>&nbsp;
		<a href="#" class="font-black">.font-black</a>&nbsp;
		<br/>
		<b class="font-red">.font-red</b>&nbsp;
		<b class="font-orange">.font-orange</b>&nbsp;
		<b class="font-yellow">.font-yellow</b>&nbsp;
		<b class="font-olive">.font-olive</b>&nbsp;
		<b class="font-green">.font-green</b>&nbsp;
		<b class="font-teal">.font-teal</b>&nbsp;
		<b class="font-blue">.font-blue</b>&nbsp;
		<b class="font-darkblue">.font-darkblue</b>&nbsp;
		<b class="font-violet">.font-violet</b>&nbsp;
		<b class="font-purple">.font-purple</b>&nbsp;
		<b class="font-pink">.font-pink</b>&nbsp;
		<b class="font-brown">.font-brown</b>&nbsp;
		<b class="font-grey">.font-grey</b>&nbsp;
		<b class="font-black">.font-black</b>&nbsp;
		<br/>
		<a href="#" class="text-default">.text-default</a>&nbsp;
		<a href="#" class="text-important">.text-important</a>&nbsp;
		<a href="#" class="text-warning">.text-warning</a>&nbsp;
		<a href="#" class="text-success">.text-success</a>&nbsp;
		<a href="#" class="text-info">.text-info</a>&nbsp;
		<a href="#" class="text-primary">.text-primary</a>&nbsp;
		<a href="#" class="text-small">.text-small</a>&nbsp;
		<br/>
		<b class="text-default">.text-default</b>&nbsp;
		<b class="text-important">.text-important</b>&nbsp;
		<b class="text-warning">.text-warning</b>&nbsp;
		<b class="text-success">.text-success</b>&nbsp;
		<b class="text-info">.text-info</b>&nbsp;
		<b class="text-primary">.text-primary</b>&nbsp;
		<b class="text-small">.text-small</b>&nbsp;
	</p>
	<p style="margin: 10px 0;">调用方法： class="font-red"</p>

	<h2 style="margin: 20px 0;">消息条颜色</h2>
	<div class="alert">
	  <div class="alert-close">&times;</div>
	  <div class="alert-icons"></div>
	  <b>Warning!</b> Best check yo self, you're not looking too good.
	</div>
	<br>
	<div class="alert-warning">
	  <div class="alert-close">&times;</div>
	  <div class="alert-icons"></div>
	  <b>Warning!</b> Best check yo self, you're not looking too good.
	</div>
	<br>
	<div class="alert-error">
	  <div class="alert-close">&times;</div>
	  <div class="alert-icons"></div>
	  <b>Warning!</b> Best check yo self, you're not looking too good.
	</div>
	<br>
	<div class="alert-success">
	  <div class="alert-close">&times;</div>
	  <div class="alert-icons"></div>
	  <b>Warning!</b> Best check yo self, you're not looking too good.
	</div>
	<br>
	<div class="alert-info">
	  <div class="alert-close">&times;</div>
	  <div class="alert-icons"></div>
	  <b>Warning!</b> Best check yo self, you're not looking too good.
	</div>
	<br>
	<div class="alert alert-block">
	  <div class="alert-close">&times;</div>
	  <div class="alert-icons"></div>
	  <b>Warning!</b> Best check yo self, you're not looking too good.
	</div>
	<br>
	<div class="alert-warning alert-block">
	  <div class="alert-close">&times;</div>
	  <div class="alert-icons"></div>
	  <b>Warning!</b> Best check yo self, you're not looking too good.
	</div>
	<br>
	<div class="alert-error alert-block">
	  <div class="alert-close">&times;</div>
	  <div class="alert-icons"></div>
	  <b>Warning!</b> Best check yo self, you're not looking too good.
	</div>
	<br>
	<div class="alert-success alert-block">
	  <div class="alert-close">&times;</div>
	  <div class="alert-icons"></div>
	  <b>Warning!</b> Best check yo self, you're not looking too good.
	</div>
	<br>
	<div class="alert-info alert-block">
	  <div class="alert-close">&times;</div>
	  <div class="alert-icons"></div>
	  <b>Warning!</b> Best check yo self, you're not looking too good.
	</div>
	<br>
	<div class="alert-red">
	  Best check yo self, you're not looking too good.
	</div>
	<br>
	<div class="alert-orange">
	  Best check yo self, you're not looking too good.
	</div>
	<br>
	<div class="alert-yellow">
	  Best check yo self, you're not looking too good.
	</div>
	<br>
	<div class="alert-olive">
	  Best check yo self, you're not looking too good.
	</div>
	<br>
	<div class="alert-green">
	  Best check yo self, you're not looking too good.
	</div>
	<br>
	<div class="alert-teal">
	  Best check yo self, you're not looking too good.
	</div>
	<br>
	<div class="alert-blue">
	  Best check yo self, you're not looking too good.
	</div>
	<br>
	<div class="alert-violet">
	  Best check yo self, you're not looking too good.
	</div>
	<br>
	<div class="alert-purple">
	  Best check yo self, you're not looking too good.
	</div>
	<br>
	<div class="alert-pink">
	  Best check yo self, you're not looking too good.
	</div>
	<br>
	<div class="alert-brown">
	  Best check yo self, you're not looking too good.
	</div>
	<br>
	<div class="alert-black">
	  Best check yo self, you're not looking too good.
	</div>
	<br>
